２か月のインターンの後半が終了しました。この一か月でやってきたことを振り返りながら自分が得たことをまとめていきます。
２か月目が始まるとき
一か月目を振り返ってみたときに、エンジニアに必要な知識などを学んだだけで具体的に自信をもって達成できたことやがんばれたことがあまり見当たらず、このままでは２か月のインターンがなにもできずあっという間に終わってしまうと危機感を覚えました。そこで２か月目は自分ができる最大限のことをやろうとおもい、考えて行動するということを心がけました。
携わったプロダクト
先月に引き続き、案件紹介プラットフォームから送られてくる案件メールを取り込んでブラウザで表示し、会社がメールを一括管理して案件を効率的に受注できるようにするwebアプリの開発に携わりました。
最初から意識して工夫した点
会社の方が使うことを考える
一か月目が終わり一度会社に伺ったとき、エンジニアで一番大切なことはお客様のことを第一に考えてプロダクトを作ることだと社長から教えていただきました。今回のプロダクトは会社の方が案件を効率よく受注することを目的としているので会社の方が使いやすいように実装することを心がけました。
まず自分で検討する
AIに聞いたらすぐ答えがかえって来ますが、まずは自分で考えてどこを修正すればいいのか、なにが足りないのかを考えることを大切にしました。自分のプログラミングレベルではAIにすぐ聞いたほうが開発の効率はいいですが、AIがすべて正しいわけではないし自身の学習において考えることは大事だと思うので、自分のなかで一度答えを出してからAIに助けてもらう方式をとりました。
主に実施したタスク
各ページのローディング表示
表示に時間がかかる可能性があるページについて読み込み中であることがわかる表示を出すタスクでした。 実装には実際のコンテンツの骨組みをプレースホルダーとして表示するスケルトンスクリーンを使用しました。Next.js の App Router における標準機能 であるloading.tsx を活用し、非同期処理が行われてる間自動的に代替UIとして表示することができました。
またカードを複数生成するのではなく、mapをつかって同じ構造のカードをループでかく仕様にしました。コードの記述量を減らし、後から表示件数を変更する際も数値を1箇所変えるだけで済むように実装することができました。
メール同期結果の表示
メール同期を押した時、成功件数を常にわかりやすく表示し、失敗があった場合はどのメールで何が起きたか（件名と理由）を画面に明記するタスクでした。エラーメッセージの表示はメッセージを受け取る際エラー発生時にエラー理由も一緒に捕まえて記録するよう型と処理を修正したのち、失敗リストを画面に渡すための配列に詰め替え、件名と理由を表示することができました。
流れとしては容易に想像できるものですぐ実装できると思ったのですが、複数のファイルで型変更を行う必要があり一つでも修正を忘れてしまうとエラーがでてしまい苦戦しました。型変更をするときは関係している部分をくまなく確認することが重要だと思いました。
受信メール内容の前後ナビゲーション
初期ページに案件が羅列されており、案件をおすと案件の詳細ページに移ることができます。このタスクは並べられていた案件をクリックすると詳細ページに遷移するのですが、その詳細ページで前後の案件の詳細ページに直接遷移できるようにするものでした。現在開いてる案件の受信日時を基準に最も近い前後の案件を探す仕様にしました。この際、アーカイブ済みの案件はスキップするという条件もしっかり組み込みました。
また最初の案件を開いている時は次の案件ボタンは出さない、最後の案件を開いている時は前の案件ボタンは出さないという制御を、Reactの条件付きレンダリングを使って実装しました。これにより、存在しないページへのリンクに遷移して404 Not Foundのエラーになるのを防ぎました。
手元で動作を確認して問題なかったのでPRを送りマージしてもらいました。しかしいざpullしてみると動作は正常にうごくのですがエラーが出てしまいました。データベースから受信日時を受け取るのにもしnullだとシステムがクラッシュしてしまうから型ガードをいれる必要があるためでした。
自分はいままでテストするときはアプリの動作が正常であれば問題ないという認識で開発をしていました。もう一人のインターン生がこのエラーの原因を見つけてくれたのですが、npm run typecheckを実行して見つけてくださいました。戎井さん本当にありがとうございました。これはデータや型に矛盾がないかを探すもので、これを実行していなかったのでエラーに気づくことができなかったとわかりました。これからはtypecheckを実行してからbuildしようと強く思いました。
メール同期不具合の修正
新しいバージョンのコードをpullして動作確認していると、新たに受信したメールが案件一覧ページにも案件詳細ページにも正しく表示されないバグを発見しました。新しいタスクを開始しコードを書き始めてからでは一度もとの状態に戻してから対応する必要があるのでpullしてすぐ確認することの重要性を体感しました。
調べていくうちにほかの人のコミットでメール本文をDBに保存しないようにする変更が原因であることがわかりました。本文をすてる代わりに案件URLを保存しなければならないが、保存する処理が抜けていたせいでメール本文からの正規表現抽出が行えず実際に表示する型が常に空になってしまい、なにも表示されないといった状態でした。
修正案として案件URLを抽出し保存するようにすることで修正できました。開発メンバーをカバーし助け合うことができ、チームで開発することの良さを実感しました。
また自分で問題をみつけ解決するという一連の流れを自分のみで実行することができたことは自分にとってすごく自信になりました。
自分の改善点
PRを詳細に
自分は初めからずっとpull requestをだすときの説明文が非常に簡素でした。初めのほうのタスクは比較的軽いものだったので自分が行った変更の概要だけ軽く書けば大丈夫だと思ってしまっていました。しかしある時PRがなかなか承認されなくて何か自分に原因があるのかもと思い、もう一人のインターン生のPRをみてみました。その方のPRはしっかりと概要、変更ファイル、実装の方法や動作確認などの項目別に分けており、自分のような文字の羅列であるPRとは見やすさが段違いに違いました。
仕事において相手の工数をできるだけなくすということが重要であるのにも関わらず、自分が手を抜いたせいで相手の理解に時間をかけてしまい迷惑をかけてしまいました。まだどのように書けばわかりやすいPRを書けるかはわかりませんが、できるだけすぐ理解できるようなPRをかけるように今後改善していきたいです。
プロダクトの改善案、機能追加の提示
タスクを振られて実装するということはできるようになりました。問題を見つけて対処することもできるようになりました。しかしタスクを実施するのに精一杯で、プロダクトをもっとよくするような改善案や機能の追加の提示ができなくて自分の力不足を感じました。
昨今AIが台頭する世の中で、作りたいものを簡単にAIで生成することができます。この中でAIにできず人間にしか考えられないことは、使用するユーザーの立場にたってその人が使いやすく、こんなのがあったらいいなと思えるようなものを考えだし作ることだと思います。
今回のインターン期間中では思いつくことができませんでしたが、これから開発に携わるときは意識して取り組むべきことだと感じましたし、日常生活のなかでいろいろなサイトやアプリでいいと思ったものを吸収していきたいです。
このインターン期間に感じたこと
プログラミングの学習方法について
プログラミングの学習において簡単なものから作っていき、どんどん複雑なものをつくる勉強法をいままで学校や本での自己学習でやってきました。しかし学習に時間がかかり、なかなか形になるものが作れず、途中で飽きてしまいました。
今回のインターンではある程度骨組みが作られた状態からコードを理解して、自分たちで追加で実装していくという方法で進みました。この方法では、複雑なコードを読み解いていく過程がすごく楽しく、１から理解していくのに比べて圧倒的に学習をスムーズに進めることができました。
最近のAIは指示をしたら即座にコードを高いレベルで作ってくれるため、自分が学習するときはまずAIにコードを書いてもらってそこから理解していくという方式をとるほうが効率的かとおもいました。
まだプログラミング初心者で軽率なことは言えませんが、これからはコードを書く力よりも書かれたコードを評価し修正できる力のほうが重要になってくるのではないかとおもいました。
二か月間の自己評価
この二か月、最初はNext.jsも知らず、エディタやGitの使い方もまったくわからない状態からのスタートでした。しかし一つ一つ学習していくことで特にインターンの後半ではチームでの開発に携わることができました。チームでの開発では、エラーなど様々な問題が起こりましたが無事乗り越えることができ常に成長できた二か月間でした。正直あっという間でもっと携わりたい気持ちでいっぱいです。
二か月間の成長には一定満足していますが、もっと早くプロダクトに携われるレベルになれたのではないかと思ったり、プロダクトに携われるようになったあとも前述したようにもっと相手の工数を少なくして効率的に開発できたのではとおもうような出来でした。しかしこの反省を活かしてもっといいエンジニアとして活動できるように成長していきたいと思いました。
また長期的な目標ですが私は大学で数学や情報学を学んでいるので、大学や大学院で得た学術的な見識と組み合わせ自分にしかできないものを作り出すのを目標にいろんなことに取り組もうと思ったきっかけになりました。
最後になりますが、初めはまったく戦力にならなかったような僕をインターンに参加させてくださり、そしてなにもできない状態から開発に携われるまで育ててくれた株式会社Quin Queの皆様、本当にありがとうございました。
